<template>
	<!-- 20221028 -->
	<view class="bar-search-cn width-100p">
		
		<!-- 组件内容 -->
		<view class="cn-content">
			<view class="height-header flex align-center">
				<!-- 搜索框 -->
				<view class="flex-one padding-lr-20 line-height-60 flex align-center" 
				:style="{'background': bgColor,'border-radius': shape == 'round' ? '30rpx' : '6rpx'}">
					<!-- 搜索图标 -->
					<text class="tyIcon-search text-30 text-aa"></text>
					<!-- 文本框 -->
					<input class="flex-one margin-lr-10 line-height-60 text-28 text-1a" 
						:style="{'background': bgColor}"
						type="text"
						confirm-type="search" :value="value" :placeholder="placeholder"
						placeholder-class="text-28 text-aa" :disabled="disabled" :maxlength="maxlength"
						:focus="autofocus" @input="inputInput" @blur="inputBlur" @focus="inputFocus"
						@confirm="inputSearch" />
					<!-- 删除图标 -->
					<text v-if="clearable && value" class="tyIcon-close-round-fill width-40 text-right text-30 text-cc"
						@tap="clear"></text>
				</view>
				
				<!-- 取消按钮 -->
				<text v-if="showCancel" class="margin-left-20 text-30 text-33" @tap="cancel">{{cancelText}}</text>
			</view>
		</view>
		
		<!-- 组件浮层 -->
		<view class="cn-layer">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			// 当前输入的值
			value: {
				type: String,
				default: ''
			},
			// 占位提示文字
			placeholder: {
				type: String,
				default: '请输入关键字搜索'
			},
			// 是否禁用输入框
			disabled: {
				type: Boolean,
				default: false
			},
			// 最大输入长度，设置为 -1 的时候不限制最大长度
			maxlength: {
				type: Number,
				default: -1
			},
			// 是否自动聚焦
			autofocus: {
				type: Boolean,
				default: false
			},
			// 是否启用清除控件
			clearable: {
				type: Boolean,
				default: true
			},
			// 是否在搜索框右侧显示取消按钮
			showCancel: {
				type: Boolean,
				default: false
			},
			// 取消按钮文字
			cancelText: {
				type: String,
				default: '取消'
			},
			// 搜索框形状，可选值round/square
			shape: {
				type: String,
				default: 'round'
			},
			// 搜索框背景颜色
			bgColor: {
				type: String,
				default: '#f5f5f5'
			}
		},

		methods: {
			/**
			 * 输入框点击完成按钮时触发
			 * @param {Object} e
			 * @date 2022-10-28
			 */
			inputSearch(e) {
				this.$emit('search', {
					keyword: e.detail.value
				})
			},

			/**
			 * 输入框当键盘输入时
			 * @param {Object} e
			 * @date 2022-10-28
			 */
			inputInput(e) {
				this.$emit("update:value", e.detail.value)
				this.$emit('input', {
					keyword: e.detail.value
				});
			},

			/**
			 * 输入框聚焦时触发
			 * @param {Object} e
			 * @date 2022-10-28
			 */
			inputFocus(e) {
				this.$emit('focus')
			},

			/**
			 * 输入框失去焦点时触发
			 * @param {Object} e
			 * @date 2022-10-28
			 */
			inputBlur(e) {
				this.$emit('blur')
			},

			/**
			 * 点击清除图标
			 * @param {Object} e
			 * @date 2022-10-28
			 */
			clear() {
				this.$emit("update:value", '')
				this.$emit('clear')
			},

			/**
			 * 点击取消图标
			 * @param {Object} e
			 * @date 2022-10-28
			 */
			cancel() {
				this.$emit('cancel')
			}
		}
	}
</script>

<style scoped>

</style>
